<template>
    <div class="box" v-if="this.businessInfo.id == null">
        <el-empty>
            <el-button type="primary" @click="$router.push('/addshop')">添加店铺</el-button>
        </el-empty>
    </div>
    <div v-else class="box">
        <el-card style="max-width:100%">
            <template #header>
                <div class="card-header" style="margin: 0 40px;">
                        <el-link>{{ businessInfo.contact }}&nbsp;您的店铺列表</el-link>
                        <el-button type="primary" @click="$router.push('/addshop')">添加店铺</el-button>
                </div>
            </template>
            <div class="shop-list">
                <el-card class="shop-card" v-for="item in shopList" :key="item.shopId">
                    <template #header>
                        <el-button type="primary" @click="changeShop(item), update = true">修改</el-button>
                        <el-button type="success" @click="gotoFoodType(item.shopId)" v-if="item.Status != 0">查询菜品分类</el-button>
                        <el-button type="primary" v-if="item.Status == 2">休息</el-button>
                        <el-button type="success" v-else-if="item.Status == 3 || item.Status == 1">
                            营业
                        </el-button>
                        <el-button type="success" v-else-if="item.Status == 4">
                            整改
                        </el-button>
                        <el-button type="danger" @click="delShop(item)">删除</el-button>
                    </template>
                    <div class="block">
                        <el-image :src="item.shopImg" />
                    </div>
                    <el-descriptions class="margin-top" :column="1" border>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    店铺介绍
                                </div>
                            </template>
                            {{ item.shopExplain }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    店铺地址
                                </div>
                            </template>
                            {{ item.shopAddress }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    起送费
                                </div>
                            </template>
                            {{ item.startPrice }}元
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    配送费
                                </div>
                            </template>
                            {{ item.deliveryPrice }}元
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    营业时间
                                </div>
                            </template>
                            {{ item.startTime }}-{{ item.endTime }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    店铺状态
                                </div>
                            </template>
                            <el-tag v-if="item.Status == 0" type="danger">未审核</el-tag>
                            <el-tag v-else-if="item.Status == 1" type="success">已审核</el-tag>
                            <el-tag v-else-if="item.Status == 2" type="primary">营业</el-tag>
                            <el-tag v-else-if="item.Status == 3" type="info">歇业</el-tag>
                            <el-tag v-else-if="item.Status == 4" type="warning">违规</el-tag>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
            </div>
            <template #footer>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[2, 3, 5, 10]" layout="total,sizes, prev, pager, next" :total="total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </template>
        </el-card>
        <!-- 修改员工信息按钮 -->
        <el-dialog v-model="update" title="请修改需要的信息" width="600">
            <el-form :model="updateDate">
                <el-form-item label="店铺名称" prop="shopName">
                    <el-input v-model="updateDate.shopName" placeholder="请输入店铺名称" />
                </el-form-item>
                <el-form-item label="店铺地址" prop="shopAddress">
                    <el-input v-model="updateDate.shopAddress" placeholder="请输入店铺地址" />
                </el-form-item>
                <el-form-item label="店铺图片" prop="shopImg">
                    <el-upload class="avatar-uploader" action="http://127.0.0.1:8080/emp/upload" :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="updateDate.shopImg" :src="updateDate.shopImg" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <span class="iconfont icon-shurukuang-shangchuantupian"></span>
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="店铺分类" prop="shopCategoryId">
                    <el-select v-model="updateDate.shopCategoryId" placeholder="请选择类别">
                        <el-option v-for="item in shopCategory" :label="item.categoryName"
                            :value="item.shopCategoryId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="起送费" prop="startPrice">
                    <el-input-number v-model="updateDate.startPrice" :precision="2" :step="0.1" :max="10" />
                </el-form-item>
                <el-form-item label="配送费" prop="deliveryPrice">
                    <el-input-number v-model="updateDate.deliveryPrice" :precision="2" :step="0.1" :max="100" />
                </el-form-item>
                <el-form-item label="营业开始时间" prop="startTime">
                    <el-time-select v-model="updateDate.startTime" style="width: 240px" :max-time="updateDate.endTime"
                        class="mr-4" placeholder="营业开始时间" start="08:30" step="00:15" end="18:30" />
                </el-form-item>
                <el-form-item label="营业结束时间" prop="endTime">
                    <el-time-select v-model="updateDate.endTime" style="width: 240px" :min-time="updateDate.startTime"
                        placeholder="营业结束时间" start="08:30" step="00:15" end="18:30" />
                </el-form-item>
                <el-form-item label="店铺介绍" prop="shopExplain">
                    <el-mention v-model="updateDate.shopExplain" type="textarea" style="width: 500px"
                        placeholder="介绍一下自己的店铺" />
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <el-mention v-model="updateDate.remarks" type="textarea" style="width: 500px" placeholder="备注" />
                </el-form-item>
                <el-form-item label="店铺状态状态" prop="status" v-if="updateDate.status == 1">
                    <el-select v-model="updateDate.status" placeholder="请选择状态">
                        <el-option label="营业" value="2" />
                        <el-option label="歇业" value="3" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="update = false">取消</el-button>
                    <el-button type="primary" @click="updateShop()">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import * as shopApi from "@/api/shop.js";
import Login from "../business/Login.vue";
export default {
    data() {
        return {
            shopList: [

            ],

            // 分页参数
            currentPage: 1,
            pageSize: 2,
            total: 20,

            // 定义变量用来存储，获取本地存储的数据
            businessInfo: {},

            // 修改弹窗
            update: false,
            updateDate: {
                shopId: "",
                shopName: "",
                shopAddress: "",
                shopImg: "",
                shopCategoryId: "",
                startPrice: "",
                deliveryPrice: "",
                startTime: "",
                endTime: "",
                status: "",
                remarks: "",
            },
        }
    },
    methods: {

        gotoFoodType(shopId) {
            this.$router.push({
                path: '/foodType',
                query: {
                    shopId
                }
            })
        },

        // 分页的方法
        // 更新页面
        handleSizeChange() {
            this.loadShop();

        },
        handleCurrentChange() {
            this.loadShop();
        },
        // 查询店铺信息
        loadShop() {
            shopApi.getShopApi({
                businessId: this.businessInfo.id,
                currentPage: this.currentPage,
                pageSize: this.pageSize,
                op: "get"
            }).then(resp => {
                this.shopList = resp.data.datas;
                this.total = resp.data.total;
            })
        },
        // 查询店铺种类信息
        loadShopCategory() {
            shopApi.shopTypeApi({ op: "get" }).then(resp => {
                this.shopCategory = resp.data;
            })
        },

        // 修改按钮
        changeShop(item) {
            this.updateDate = item;
            this.update = true;
        },

        // 修改商家信息
        updateShop() {
            shopApi.updateShopApi({ ...this.updateDate, op: "update" }).then(resp => {
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                });
                this.updateDate = {};
                this.loadShop();
                this.update = false;

            })
        },
        // 删除商家信息
        delShop(item) {
            shopApi.delShopApi({ ...item, op: "del" }).then(resp => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                });
                this.loadShop();
            })
        },

    },
    created() {
        let info = sessionStorage.getItem("business");
        if (!info) {
            this.$router.push('/busLogin');
        }
        this.businessInfo = JSON.parse(info);
        this.loadShop();
        this.loadShopCategory();

    }
}
</script>

<style scoped>
.card-header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shop-list {
    display: flex;
    justify-content: space-around;
}

.shop-card {
    width: 45%;
}

:deep(.el-card__header) {
    display: flex;
    justify-content: space-between;
}
</style>